<!DOCTYPE html>
<html lang="en">
<head>
    <title>${product.productName}_重庆恭逸科技有限公司</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="description" content="${product.mainDescription}">
    <meta name="keywords" content="
    @for(item in keywords){
        ${item},
    @}
    ">
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!--// bootstrap-css -->

    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/style.css" type="text/css" media="all" />
    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->

    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->

    <script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>

    <script src="${ctxPath}/static/js/bootstrap-paginator.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script>
    <!-- flexslider -->
    <link rel="stylesheet" href="${ctxPath}/static/css/flexslider.css" type="text/css" media="screen" />
    <!-- //flexslider -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!--banner-->
    @include("../_header.html",{current:className}){}
    <div class="banner-top visible-lg-block visible-md-block"  style="height: 570px;background: url(${productClass.pic}) no-repeat 0 0;background-size: cover ">
    </div>
    @if(className=='智能马桶'){
    <div class="banner-top visible-xs-block visible-sm-block"  style="height: 300px;background: url('/static/images/mobile/matong/banner.jpg') no-repeat 0 ;background-size: cover ">
    </div>
    @}else{
    <div class="banner-top visible-xs-block visible-sm-block"  style="height: 300px;background: url('/static/images/mobile/matonggai/banner.jpg') no-repeat 0 ;background-size: cover ">
    </div>
    @}
    <!--//banner-->
    <!--PC -->
    <div class="container-fluid visible-lg-block visible-md-block" style="background-color: #EEEEEE;padding: 0">
        <div class="container" style="margin-top: 10px;position:relative;">
            <div class="col-md-3 visible-md-block visible-lg-block" style="position: static">
                <div id="detail" style="z-index: 999;width: 200px;opacity: 0.8">
                    <div style="background-color:#f8f8f8;color: #3a3a3a;">
                        <div style="font-weight: 400;font-size: 18px; text-align:center;line-height:35px;background-color: #50c9a0;">
                            <span style="color: white">功能分类</span>
                        </div>
                        <div style="width: 100%;text-align: center;font-size: 16px">
                            @for(class in classList){
                            @if(classLP.last){
                            <div style="width: 100%;line-height: 35px;">  <a class="a_classname" href="/product/list?className=${class.id}" style="color:#3f3f3f;font-weight: 500">${class.name}</a></div>
                            @}else{
                            <div style="width: 100%;line-height: 35px;">  <a class="a_classname" href="/product/list?className=${class.id}" style="color:#3f3f3f;font-weight: 500">${class.name}</a></div>
                            <hr  style="margin:0 43% 0 43%;background-color: #50C9A0;height: 1px"  />
                            @}
                            @}
                        </div>
                    </div>
                    <script>
                        var els = document.getElementsByClassName("a_classname");
                        $(els).each(function (i) {
                            if ($(els)[i].innerText == "${className}") {
                                $($(els)[i]).addClass("product-class-color")
                            }
                        });
                    </script>
                    @include("../container_left.html"){}
                </div>
            </div>
            <div class="col-md-9">
                <div class="visible-lg-block visible-md-block" style="height: 40px;width: 100%;line-height: 40px">
                    <div style="display: inline-block;border-left:8px solid #50c9a0;padding-left: 8px;height: 35px">
                        <span style="margin: 0;font-size: 21px;color: #474747">${className}</span></div>
                    <!--面包屑 -->
                    <div style="display: inline-block;float: right">
                        <ul style="list-style: none">
                            <li style="display: inline-block;">
                                <span style="color:#464646 ">您当前的位置：</span>
                                <a href="/index" style="color: #464646; text-decoration: none;font-family: 'Roboto', sans-serif;">首页</a>
                                <span style="color:#464646 "> &nbsp>>&nbsp </span>
                            </li>
                            <li style="display: inline-block;">
                                <a href="/product/list?className=${product.productClassId}" style="color: #464646;text-decoration: none;font-family: 'Roboto', sans-serif;">${className}</a>
                                <span style="color:#464646 "> &nbsp>>&nbsp </span>
                            </li>
                            <li style="display: inline-block;color: #464646;font-family: 'Open Sans', sans-serif;letter-spacing: 1px">产品详情</li>
                        </ul>
                    </div>
                    <!--//面包屑 -->
                </div>
                <div class="row" style="margin-top: 25px">
                    <div class="col-md-8">
                        <h3>参数信息</h3>
                        @for(item in attr){
                        <div class="col-md-6"><span>${item}</span></div>
                        @}
                    </div>
                    <div class="col-md-4">
                        <img src="${product.pic}" alt="${product.productName}" width="100%" height="auto">
                    </div>
                </div>
                <div style="margin-top: 30px;background-color: rgba(80, 201, 160, 0.7);padding: 5px 5px 5px 27px;color: white">
                    <h2>产品详情</h2>
                    <div class="container-fluid">
                        <div style="display: block;padding: 9.5px;margin: 0 0 10px;font-size: 13px;line-height: 1.42857143;word-break: break-all;word-wrap: break-word;">
                            ${product.detail}
                        </div>
                    </div>
                </div>
                <div style="width: 100%;margin-bottom: 60px">
                    <img src="${product.longPic}"  alt="${product.productName}详细图解" style="width: 100%;height: auto">
                </div>
                <hr />
                <div ><span style="color: #939393;font-weight: 300">本文网址</span> &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="https://www.gongyitech.com/product/detail/${product.id}.html"><span style="color:#50c9a0;display: inline-block;width: 70%;vertical-align: top">https://www.gongyitech.com/product/detail/${product.id}.html</span></a></div>
                <hr style="background-color: #d8d8d8 " />
                <div style="color: #bbbbbb"><span style="color: #939393;font-weight: 300">关键词</span>&ensp;&ensp;&ensp;&ensp;
                    <span style="display: inline-block;width: 70%;vertical-align: top">
                            @for(keyword in keywords){
                            <a href="/search/keywords/${keyword}.html"> <span style="color:#50c9a0">${keyword}</span> </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            @}
                     </span>
                </div>
                <hr style="background-color: #d8d8d8 "/>
                <div class="row" style="margin-top: 30px">
                    <h3>相关产品</h3>
                    <hr style="height: 2px;background-color: #8c7f7f;"/>
                    @if(relativeProduct.~size == 0){
                    <div style="text-align: center;margin-top: 90px;margin-bottom: 90px">
                        <span>暂无相关产品</span>
                    </div>
                    @}
                    <div style="margin: 15px 0;cursor: pointer;height: 130px">
                        @for(item in relativeProduct){
                        <div class="col-md-2">
                            <a href="/product/detail/${item.id}.html">
                                <div class="panel panel-default">
                                    <div class="panel-body" style="padding: 0;height: 120px;display: flex;align-items: center;justify-content: center">
                                        <img src="${item.pic}" alt="${item.productName}" style="width: 80%;height: auto">
                                    </div>
                                    <div style="padding: 0;text-align: center;width: 100%;background-color: #50c9a0;color:#fbf7f7;overflow: hidden; white-space: nowrap;text-overflow: ellipsis ">${item.productName}</div>
                                </div>
                            </a>
                        </div>
                        @}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--PC//end -->
    <!--mobile -->
    <div class="container visible-xs-block visible-sm-block" style="background-color: #EEEEEE;padding: 0">
        <div class="container">
            <div style="margin-top: 60px">
                <span class="mobile-title1">产品详情</span>
                <span class="mobile-title2">不止于方便&ensp;可以体验的智能马桶盖</span>
            </div>
            <div style="margin-top: 20px">
                <span style="font-size: 15px">${product.detail}</span>
            </div>
            <div style="margin-top: 20px">
                <img src="${product.pic}" alt="${product.productName}" width="100%" height="auto">
            </div>
            <div style="margin-top: 60px">
                <span class="mobile-title2">参数信息</span>
                @for(item in attr){
                <div class="col-xs-6"><span>${item}</span></div>
                @}
                <div class="clear"></div>
            </div>
            <div style="margin-top: 60px">
                <span class="mobile-title2">产品细节</span>
            </div>
            <div style="margin-top: 20px">
                <img src="${product.longPic}"  alt="${product.productName}详细图解" style="width: 100%;height: auto">
            </div>
            <hr />
            <div ><span style="color: #939393;font-weight: 300">本文网址</span> &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="https://www.gongyitech.com/product/detail/${product.id}"><span style="color:#50c9a0;display: inline-block;width: 70%;vertical-align: top">https://www.gongyitech.com/product/detail/${product.id}</span></a></div>
            <hr style="background-color: #d8d8d8 " />
            <div style="color: #bbbbbb"><span style="color: #939393;font-weight: 300">关键词</span>&ensp;&ensp;&ensp;&ensp;
                <span style="display: inline-block;width: 70%;vertical-align: top">
                            @for(keyword in keywords){
                            <a href="/search?keywords=${keyword}"> <span style="color:#50c9a0">${keyword}</span> </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            @}
            </span>
            </div>
            <hr style="background-color: #d8d8d8 "/>
            <div style="margin-top: 30px">
                <span class="mobile-title2">相关产品</span>
                <hr style="height: 2px;background-color: #8c7f7f;"/>
                @if(relativeProduct.~size == 0){
                <div style="text-align: center;margin-top: 90px;margin-bottom: 90px">
                    <span>暂无相关产品</span>
                </div>
                @}
                <div style="margin: 15px 0;cursor: pointer">
                    @for(item in relativeProduct){
                    <div class="col-xs-6">
                        <a href="/product/detail/${item.id}">
                            <div class="panel panel-default">
                                <div class="panel-body" style="padding: 0;height: 120px;display: flex;align-items: center;justify-content: center">
                                    <img src="${item.pic}" alt="${item.productName}" style="width: 80%;height: auto">
                                </div>
                                <div style="padding: 0;text-align: center;width: 100%;background-color: #50c9a0;color: #fbf7f7;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">${item.productName}</div>
                            </div>
                        </a>

                    </div>
                    @}
                </div>
            </div>
        </div>

    </div>
    <!--mobile //end-->
    <!-- footer -->
    @include("../_footer.html"){}
    <!-- //footer -->
    <script>
        var left = $("#detail");
        var win = $(window); //得到窗口对象
        var sc = $(document);//得到document文档对象
        win.scroll(function () {
            var t2 = document.documentElement.scrollHeight;
            var t1 = document.documentElement.scrollTop ;
            var b = t2-t1;
            console.log("距离底部距离："+ b);
            navScroll(b);
        });

        function navScroll(bottom) {
            if (sc.scrollTop() >= 500) {
                if(bottom<1050){
                    left.addClass("left_relative");
                    left.removeClass("left_nav_class");
                }else{
                    left.addClass("left_nav_class");
                    left.removeClass("left_relative")
                    if (win.width < 768) {
                        left.animate({display: 'none'}, 0)
                    }
                }
            } else {
                left.removeClass("left_relative");
                left.removeClass("left_nav_class");
            }
        }
    </script>
    <script src="${ctxPath}/static/js/jarallax.js"></script>
    <script src="${ctxPath}/static/js/SmoothScroll.min.js"></script>
    <script type="text/javascript">
        /* init Jarallax */
        $('.jarallax').jarallax({
            speed: 0.5,
            imgWidth: 1366,
            imgHeight: 768
        })
    </script>
    <script src="${ctxPath}/static/js/responsiveslides.min.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
    <!-- here stars scrolling icon -->
    <script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
    <!-- //here ends scrolling icon -->
    <!-- FlexSlider -->
    <script defer src="${ctxPath}/static/js/jquery.flexslider.js"></script>
    <!-- //FlexSlider -->
</body>
</html>